import patchVnode from "./patchVnode.js"
import createElement from "./createElement.js"

// 判断两个虚拟节点是否为同一个节点
function sameVnode(vNode1, vNode2) {
    return vNode1.key == vNode2.key
}

// 真实dom节点 , 旧的虚拟节点 新的虚拟节点
export default function name(parentElm, oldCh, newCh) {
    // console.log(parentElm,oldCh,newCh);
    let oldStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let newStartIdx = 0
    let newEndIdx = newCh.length - 1

    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (oldStartVnode == undefined) {

            oldStartVnode = oldCh[++oldStartIdx]

        } else if (oldEndVnode == undefined) {

            oldEndVnode = oldCh[--oldStartIdx]

        } else if (sameVnode(oldStartVnode, newStartVnode)) {
            console.log(1);
            // 旧前和新前
            patchVnode(oldStartVnode, newStartVnode)
            // 看看有什么问题
            if (newStartVnode) newStartVnode.elm = oldStartVnode?.elm
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]

        } else if (sameVnode(oldEndVnode, newEndVnode)) {
            console.log(2);

            // 旧后和新后
            patchVnode(oldEndVnode, newEndVnode)
            if (newEndVnode) newEndVnode.elm = oldEndVnode?.elm
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]

        } else if (sameVnode(oldStartVnode, newEndVnode)) {
            console.log(3);
            // 旧前和新后
            patchVnode(oldStartVnode, newEndVnode)
            if (newEndVnode) newEndVnode.elm = oldStartVnode?.elm
            // 把旧前指定的节点移动到旧后指向的节点后面
            parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)

            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]

        } else if (sameVnode(oldEndVnode, newStartVnode)) {
            console.log(4);

            // 旧后和新前
            patchVnode(oldEndVnode, newStartVnode)
            if (newStartVnode) newStartVnode.elm = oldEndVnode?.elm
            // 把旧后指定的节点移动到旧前指向的节点后面
            parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)

            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
        } else {
            // 其他情况 查找
            console.log(5);

            // 创建对象 存放虚拟节点 判断新旧有没有相同节点
            const keyMap = {}
            for (let i = oldStartIdx; i <= oldEndIdx; i++) {
                const key = oldCh[i]?.key
                if (key) keyMap[key] = i
            }
            // 在旧节点中查找匹配新前节点
            let idxInOld = keyMap[newStartVnode.key]
            // 如果匹配到节点 该节点在新旧虚拟节点中都存在
            if (idxInOld) {
                const elmMove = oldCh[idxInOld]
                patchVnode(elmMove, newStartVnode)
                // 处理过的节点 在旧虚拟节点的数组中,设置为undefined
                oldCh[idxInOld] = undefined
                parentElm.insertBefore(elmMove.elm, oldStartVnode.elm)
            } else {
                // 创建节点
                parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm)
            }
            newStartVnode = newCh[++newStartIdx]
        }
    }

    // 结束循环 新增和删除
    //oldStartIdx > oldEndIdx || newStartIdx > newEndIdx
    if (oldStartIdx > oldEndIdx) {
        // 新增
        const before = newCh[newEndIdx + 1] ? newCh[newEndIdx + 1].elm : null

        for (let i = newStartIdx; i <= newEndIdx; i++) {
            parentElm.insertBefore(createElement(newCh[i]), before)

        }
    } else {
        // 删除
        for (let i = oldStartIdx; i <= oldEndIdx; i++) {
            parentElm.removeChild(oldCh[i].elm)

        }
    }
}